<template>
	<div>
		<Card>
			<!-- 删除面板 -->
			<Modal v-model="deleteNsall" title="删除分组" @on-ok="remove" @on-cancel="cancel">
				是否删除该分组
			</Modal>
			<!-- 详情面板 -->
			<Modal v-model="details" title="详情" @on-ok="remove" @on-cancel="cancel" width="800" class="details">
				<Card class="myCard">
					<div class="title">
						详情
					</div>
					<div class="form">
						<label>名称：</label>
						<span>{{name}}</span>
					</div>
					<div class="form">
						<label>注释</label>
						<span v-for="(item, index) in notes" :key="index">
							<div>{{item}}</div>
						</span>
					</div>
					<div class="form">
						<label>创建时间：</label>
						<span>{{date}}</span>
					</div>
					<div class="form">
						<label>状态：</label>
						<span>{{state}}</span>
					</div>
					<div class="form">
						<label>声明：</label>
						<span>{{statement}}</span>
					</div>
					<div class="form">
						<label>回收策略：</label>
						<span>{{recovery}}</span>
					</div>
					<div class="form">
						<label>访问模式：</label>
						<span>{{visite}}</span>
					</div>
					<div class="form">
						<label>存储类：</label>
						<span>{{storage}}</span>
					</div>
					<!-- <div class="form">
						<label>原因：</label>
						<span>{{reason}}</span>
					</div>
					<div class="form">
						<label>消息：</label>
						<span>{{message}}</span>
					</div> -->
				</Card>
				<Card class="myCard">
					<div class="title">
						来源
					</div>
					<div class="form">
						<label>NFS：</label>
					</div>
					<div class="form">
						<label>服务器</label>
						<span>{{server}}</span>
					</div>
					<div class="form">
						<label>路径：</label>
						<span>{{path}}</span>
					</div>
					<div class="form">
						<label>只读：</label>
						<span>{{readonly}}</span>
					</div>
				</Card>
				<Card class="myCard">
					<div class="title">
						总量
					</div>
					<Table :columns="columns1" :data="tableData1"></Table>
				</Card>
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				columns: [
					{
						title: '名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							if (params.row.metadata.labels !== undefined) {
								let str = ''
								for (let key in params.row.metadata.labels) {
									str += '{' + key + ':' + params.row.metadata.labels[key] + '}'
								}
								return h('span', str)
							} else {
								return h('span', '-')
							}
						}
					},
					{
						title: '总量',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.capacity.storage)
						}
					},
					{
						title: '访问模式',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.accessModes[0])
						}
					},
					{
						title: '回收策略',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.persistentVolumeReclaimPolicy)
						}
					},
					{
						title: '声明',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.claimRef.namespace + '/' + params.row.spec.claimRef.name)
						}
					},
					{
						title: '存储类',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.storageClassName)
						}
					},
					{
						title: '状态',
						key: 'status',
						render: (h, params) => {
							return h('span', params.row.status.phase)
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.details = true
											let detailsData = this.tableData[params.index]
											// 名称
											this.name = detailsData.metadata.name
											// 注释
											this.notes = []
											for (let key in detailsData.metadata.annotations) {
												this.notes.push(key + ':' + detailsData.metadata.annotations[key])
											}
											// 创建时间
											this.date = Util.fommotDate(detailsData.metadata.creationTimestamp)
											// 状态
											this.state = detailsData.status.phase
											// 声明
											this.statement = detailsData.spec.claimRef.namespace + '/' + detailsData.spec.claimRef.name
											// 回收策略
											this.recovery = detailsData.spec.accessModes[0]
											// 访问模式
											this.visite = detailsData.spec.persistentVolumeReclaimPolicy
											// 存储类
											this.storage = detailsData.spec.persistentVolumeReclaimPolicy
											// // 原因
											// this.reason =
											// // 消息
											// this.message =
											// 服务器
											this.server = detailsData.spec.nfs.server
											// 路径
											this.path = detailsData.spec.nfs.path
											// 只读
											this.readonly = detailsData.spec.nfs.readonly
											for (let key in detailsData.spec.capacity) {
												this.tableData1.push({name: key, value: detailsData.spec.capacity[key]})
											}
										}
									}
								}, '查看详情')
								// h('Button', {
								// 	props: {
								// 		type: 'error',
								// 		size: 'small'
								// 	},
								// 	on: {
								// 		click: () => {
								// 			this.deleteNsall = true
								// 			this.deleteName = params.row.metadata.name
								// 			this.deleteIndex = params.index
								// 		}
								// 	}
								// }, '删除')
							])
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '资源名称',
						key: 'name'
					},
					{
						title: '总量',
						key: 'value'
					}
				],
				tableData1: [],
				// 删除面板
				deleteNsall: false,
				// 删除组名
				deleteName: '',
				// 删除下标
				deleteIndex: '',
				// 应用类型列表
				typeList: [
					{
						name: 'stoarge',
						text: '存储类'
					},
					{
						name: 'PersistentVolumeClaim',
						text: '持久化存储卷声明'
					},
					{
						name: 'PersistentVolume',
						text: '持久化存储卷'
					}
				],
				// 详情面板
				details: false,
				// 名称
				name: '',
				// 注释
				notes: '',
				// 创建时间
				date: '',
				// 状态
				state: '',
				// 声明
				statement: '',
				// 回收策略
				recovery: '',
				// 访问模式
				visite: '',
				// 存储类
				storage: '',
				// 原因
				reason: '',
				// 消息
				message: '',
				// 服务器
				server: '',
				// 路径
				path: '',
				// 只读
				readonly: ''
			}
		},
		methods: {
			// 删除
			remove () {
				this.$api.delete(0, '/kuber/v2/k8s/nameSpace?name=' + this.deleteName, {}, r => {
					if (r.data.code === 0) {
						this.tableData.splice(this.deleteIndex, 1)
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			},
			cancel () {
				this.deleteName = ''
				this.deleteIndex = ''
			},
			// 获取表格数据
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/stoarge?type=PersistentVolume&owner=', {}, r => {
					this.tableData = r.data.data.items
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>

<style>
	label.myLabel {
		width: 100px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}

	div.form-div {
		margin-bottom: 15px;
	}

	.resources .ivu-modal {
		width: 500px !important
	}

	.resources label.myLabel {
		width: 200px
	}

	.resources .ivu-input-wrapper {
		width: 200px
	}
</style>
